//与硬件对接
<template>
    <el-container>
        <el-header>
            <h2>储运箱202134数据展示</h2>
        </el-header>
        <el-main>
            <el-row>
                <div style="width: 700; height: 600; color:red; float: left;">
                    <el-card style="width: 700px; height: 350px; ">

                        <div style="text-align: left; width: 350px;  float: right">
                            <h3>温度阈值1:{{ limit1 }}℃</h3>
                            <h3>温度阈值2:{{ limit2 }}℃</h3>
                            <h3>光照强度阈值:{{ limit3 }}</h3>
                            <h3>可利用温差:{{ limit4 }}</h3>
                            <h3>电机状态:{{ buttonvalue1 }}</h3>
                        </div>

                        <div style="text-align: left; width: 350px;  ">
                            <h3>温度1:{{ state1 }}℃</h3>
                            <h3>温度2:{{ state9 }}℃</h3>
                            <!-- <h3>湿度一:{{ state2 }}℃</h3> -->
                            <!-- <h3>水质1:{{ TDS1 }}</h3> -->
                            <!-- <h3>水质2:{{ TDS2 }}</h3> -->
                            <h3>光照强度:{{ state3 }}</h3>
                            <h3>风扇1功率:{{ power1 }}</h3>
                            <h3>风扇2功率:{{ power2 }}</h3>
                            <h3>LED灯发光强度:{{ power3 }}</h3>
                        </div>



                    </el-card>
                    <!-- <el-card style="width: 700px; height: 250px;">
                        <div style="text-align: left; width: 350px; float: right; ">
                            <h3>功率1:{{ power1 }}</h3>
                            <h3>功率2:{{ power2 }}</h3>
                            <h3>功率3:{{ power3 }}</h3>

                        </div>
                        <div style="text-align: left; width: 350px;  ">
                            <h3>温度阈值:{{ limit1 }}℃</h3>
                            <h3>低水位阈值:{{ limit2 }}</h3>
                            <h3>高水位阈值:{{ limit3 }}</h3>
                            <h3>饮水机属性:{{ buttonvalue1 }}</h3>
                        </div>
                    </el-card> -->
                </div>



                <div style="width: 700; height: 600; color:red; float: left; ">
                    <el-card style="width: 700px; height: 150px;">
                        <h3>当前时间:{{ currentTime }}</h3>
                    </el-card>
                    <el-card style="width: 700px; height: 200px;">
                        <div style="text-align: left; width: 350px;  ">
                            <!-- <h3>v1:{{ state5 }}</h3>
                            <h3>v2:{{ state6 }}</h3> -->
                            <!-- <h3>电压强度:{{ state7 }}</h3> -->
                            <!-- <h3>警报:{{ warn }}</h3> -->
                            <h3>货物编号:{{ card }}</h3>
                        </div>
                    </el-card>
                </div>



            </el-row>
            <el-row>
                <div style="width: 300; height: 600; color:red; float: left; ">
                    <el-card style="width: 700px; height: 600px; ">
                        <div style="text-align: left; width: 350px;  float: right;">

                            <h3>警报灯</h3>
                            <el-switch @change="setswitch3" v-model="switch3" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>空调压缩机</h3>
                            <el-switch @change="setswitch1" v-model="switch1" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>风机</h3>
                            <el-switch @change="setswitch2" v-model="switch2" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>LED灯</h3>
                            <el-switch @change="setswitch4" v-model="switch4" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>自动模式</h3>
                            <el-switch @change="setswitch5" v-model="switch5" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>

                        </div>
                        <div style="text-align: left; width: 300px; height: 600px; ">
                            <h3>设置温度阈值1</h3>
                            <el-input v-model="inputlimit1" placeholder="温度阈值1" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setlimit1">确定</el-button>
                            <h3>设置温度阈值2</h3>
                            <el-input v-model="inputlimit2" placeholder="温度阈值2" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setlimit2">确定</el-button>
                            <h3>设置光照强度阈值</h3>
                            <el-input v-model="inputlimit3" placeholder="光照强度阈值" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setlimit3">确定</el-button>
                            <h3>设置空调压缩机功率</h3>
                            <el-input v-model="inputpower1" placeholder="风扇1功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower1">确定</el-button>
                            <h3>设置风机功率</h3>
                            <el-input v-model="inputpower2" placeholder="风扇2功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower2">确定</el-button>

                        </div>
                    </el-card>
                </div>
                <div style="width: 300; height: 600;  float: left; ">
                    <el-card style="width: 700px; height: 600px;">
                        <div style="text-align: left; width: 300px; height: 600px; ">
                            <h3>电机状态</h3>
                            <el-button type="primary" @click="setbuttonvalue1">制冷</el-button>
                            <br>
                            <el-button type="primary" @click="setbuttonvalue2">制热</el-button>
                            <br>
                            <el-button type="primary" @click="setbuttonvalue3">关闭</el-button>
                            <br>
                            <h3>设置LED灯功率</h3>
                            <el-input v-model="inputpower3" placeholder="LED灯功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower3">确定</el-button>
                            <h3>设置可利用温差</h3>
                            <el-input v-model="inputlimit4" placeholder="温度阈值1" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setlimit4">确定</el-button>
                            <h3>设置湿度上限</h3>
                            <el-input v-model="inputlimit5" placeholder="湿度上限" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setlimit5">确定</el-button>
                        </div>
                    </el-card>
                </div>

            </el-row>
        </el-main>
    </el-container>


</template>


<script>
const axios = require('axios');
import { websocket } from '@/utils/websocket';
//相当于导入和逻辑处理一起解决
var sendMeg = "";//处理发送给硬件的信息
var Meg = "";
var cardid = ""; // eslint-disable-line no-unused-vars

export default {
    // el: '#control',
    data() {
        return {
            inputpower1:"",
            inputpower2:"",
            inputpower3:"",
            power1:0,
            power2:0,
            power3:0,
            inputlimit1: "", //设置温度阈值1
            inputlimit2: "", //设置温度阈值2
            inputlimit3: "", //设置光照阈值
            inputlimit4: "", //设置可利用温差
            inputlimit5: "", //设置湿度上限
            switch1: false,
            switch2: false,
            switch3: false, //空调开关
            switch4: false, //LED开关
            switch5: false, //自动模式
            card: ["C78874E56"],
            state1: "", //温度
            // state2:"", 
            state3: "", //光照强度
            state4: "",
            state5: "", //v1
            state6: "", //v2
            // state7:"",
            state8: "",
            state9: "",
            currentTime: "",
            limit1: 30, //温度阈值1
            limit2: 20, //温度阈值2
            limit3: 50, //光照强度阈值
            limit4: 20, //可利用温差
            limit5: 50, //可利用温差
            warn: "",
            buttonvalue1: "", //饮水机属性  
            cardid: "", //传来的卡号
            starttime:0,  //开启定时的时间 
            timerId:"",  //定时器
            overtime:0,//断线时间过长
        }
    },
    computed: {
    },
    watch: {//监听错误次数变化


    },
    created() {
        this.updateTime();
        this.initWecSocket();
    },
    methods: {
        updateTime: function () {  //获取当前时间
            this.currentTime = new Date().toLocaleTimeString();
            setTimeout(this.updateTime); // 每秒更新一次时间
        },
        setpower3: function () { //设置LED灯功率
            this.power3 = this.inputpower3;
            if (this.power3 < 10) {
                sendMeg = "HWled100" + this.power3 + "Z";
            }
            else if (this.power3 < 100) {
                sendMeg = "HWled10" + this.power3 + "Z";
            }
            else {
                sendMeg = "HWled1" + this.power3 + "Z";
            }
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setpower2: function () { //设置风扇2功率
            this.power2 = this.inputpower2;
            this.switch2 = true;
            if (this.power2 < 10) {
                sendMeg = "HWfan200" + this.power2 + "Z";
            }
            else if (this.power2 < 100) {
                sendMeg = "HWfan20" + this.power2 + "Z";
            }
            else {
                sendMeg = "HWfan2" + this.power2 + "Z";
            }
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setpower1: function () { //设置风扇1功率
            this.power1 = this.inputpower1;
            this.switch1 = true;
            if (this.power1 < 10) {
                sendMeg = "HWfan100" + this.power1 + "Z";
            }
            else if (this.power1 < 100) {
                sendMeg = "HWfan10" + this.power1 + "Z";
            }
            else {
                sendMeg = "HWfan1" + this.power1 + "Z";
            }
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setlimit5: function () { //设置可利用温差
            this.limit5 = this.inputlimit5;
        },
        setlimit4: function () { //设置可利用温差
            this.limit4 = this.inputlimit4;
        },
        setlimit3: function () { //设置光照阈值
            this.limit3 = this.inputlimit3;
            // sendMeg = "HWt1" + this.limit1 + "t2" + this.limit2 + "ls" + this.limit3 + "Z";
            if (this.limit3 < 10) {
                sendMeg = "Light0" + this.limit3 + "Z";
            } else {
                sendMeg = "Light" + this.limit3 + "Z";
            }
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setlimit2: function () { //设置温度阈值2
            this.limit2 = this.inputlimit2;
            // sendMeg = "HWt1" + this.limit1 + "t2" + this.limit2 + "ls" + this.limit3 + "Z";
            if (this.limit2 < 10) {
                sendMeg = "Lmax0" + this.limit2 + "Z";
            } else {
                sendMeg = "Lmax" + this.limit2 + "Z";
            }
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setlimit1: function () { //设置温度阈值1（位数固定要补零）
            this.limit1 = this.inputlimit1;
            // sendMeg = "HWt1" + this.limit1 + "t2" + this.limit2 + "ls" + this.limit3 + "Z";
            if (this.limit1 < 10) {
                sendMeg = "Tmax0" + this.limit1 + "Z";
            } else {
                sendMeg = "Tmax" + this.limit1 + "Z";
            }
            console.log("修改成功！")
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setswitch5: function () { //设置自动模式
            if (this.switch5 == true) {
                this.switch5 = true;
            }
            else{
                this.switch5 == false;
            }
        },
        setswitch4: function () { //设置空调开关/指示灯开关
            if (this.switch4 == true) {
                axios.get("http://localhost:8888/sendMessageTo/HWled1100Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWled1000Z");
            }
        },
        setswitch3: function () { //设置空调开关/指示灯开关
            if (this.switch3 == true) {
                axios.get("http://localhost:8888/sendMessageTo/HWwarn1Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWwarn0Z");
            }
        },
        setswitch2: function () { //设置风扇2开关/风机
            if (this.switch2 == true) {
                axios.get("http://localhost:8888/sendMessageTo/HWfan2100Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWfan2000Z");
            }
        },
        setswitch1: function () { //设置风扇1开关/空调压缩机
            if (this.switch1 == true) {
                axios.get("http://localhost:8888/sendMessageTo/HWfan11Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWfan10Z");
            }
        },
        setbuttonvalue3: function () { //设置关闭
            this.buttonvalue1 = "关闭"
            this.switch1 = false;
            axios.get("http://localhost:8888/sendMessageTo/HWfanf000Z");
            axios.get("http://localhost:8888/sendMessageTo/HWfanz000Z");
        },
        setbuttonvalue2: function () { //设置反转
            this.buttonvalue1 = "反转"
            this.switch1 = true;
            axios.get("http://localhost:8888/sendMessageTo/HWfanf100Z");
        },
        setbuttonvalue1: function () { //设置正转
            this.buttonvalue1 = "正转"
            this.switch1 = true;
            axios.get("http://localhost:8888/sendMessageTo/HWfanz100Z");
        },
        reconnect: function () {
            clearInterval(this.timerId); //清除定时器
            sendMeg = "Tmax" + this.limit1 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            sendMeg = "Lmax" + this.limit2 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            sendMeg = "Light" + this.limit3 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            if(this.overtime == 1){
                axios.get("http://localhost:8888/sendMessageTo/HWwarn1Z");
                this.overtime = 0; // 恢复原来的状态
            }
        },
        initWecSocket: function () {
            // this.webSocket = new WebSocket("ws://localhost:8888//ws/WebSocket");
            this.webSocket = websocket;
            this.webSocket.onmessage = this.webSocketOnmessage;
            // this.webSocket.onerror = this.webSocketOnerror();
            //初始化完毕之后echarts显示数据信息
        },
        webSocketOnmessage: function (event) { //对接受的信息进行逻辑判断
            //    Meg=JSON.parse(event.data)
            Meg = event.data;
            console.log("收到硬件信息" + Meg);
            //根据收到的信息实时显示到页面
            if (event.data.substring(0, 1) == "t") {
                var s = event.data.substring(1, ).split("Hd")
                this.state1 = Number(s[0]); //温度1
                this.state9 = Number(s[1]); //温度2
                console.log(this.state1 > this.limit1)
                console.log(this.state1 < this.limit2)
                console.log(this.limit2)
                if(this.switch5 == true){
                if(this.state1 > this.limit1){  //温度1高于阈值1
                    if(Math.abs(this.state1 - this.state9) > this.limit4){
                        this.switch2 = true;
                        this.power2 = ((this.state1  - this.limit1) * 10).toFixed(2);  //风扇2的功率成正比
                        if (this.power2 < 10) {
                            sendMeg = "HWfan200" + this.power2 + "Z";
                        }
                        else if (this.power2 < 100) {
                            sendMeg = "HWfan20" + this.power2 + "Z";
                        }
                        else {
                            sendMeg = "HWfan2" + this.power2 + "Z";
                        }
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                    }
                    else if(Math.abs(this.state1 - this.state9) < this.limit4){
                        this.switch1 = true;
                        this.buttonvalue1 = " 正转";
                        this.power1 = ((this.state1  - this.limit1) * 10).toFixed(2);
                        if (this.power1 < 10) {
                            sendMeg = "HWpfanz00" + this.power1 + "Z";
                        }
                        else if (this.power1 < 100) {
                            sendMeg = "HWpfanz0" + this.power1 + "Z";
                        }
                        else {
                            sendMeg = "HWpfanz" + this.power1 + "Z";
                        }
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                    }
                }
                else if(this.state1 < this.limit2){ //温度1低于阈值2
                    console.log("进入判断")
                    console.log(Math.abs(this.state1 - this.state9) < this.limit4)
                    console.log(Math.abs(this.state1 - this.state9) > this.limit4)
                    if(Math.abs(this.state1 - this.state9) > this.limit4){
                        this.switch2 = true;
                        this.power2 = (( this.limit2 - this.state1) * 10).toFixed(2);  //风扇2的功率成正比
                        if (this.power2 < 10) {
                            sendMeg = "HWfan200" + this.power2 + "Z";
                        }
                        else if (this.power2 < 100) {
                            sendMeg = "HWfan20" + this.power2 + "Z";
                        }
                        else {
                            sendMeg = "HWfan2" + this.power2 + "Z";
                        }
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);     
                    }
                    if(Math.abs(this.state9 - this.state1) < this.limit4){
                        console.log("空调制热")
                        this.switch1 = true;
                        this.buttonvalue1 = "反转"
                        this.power1 = ((this.limit2 - this.state1) * 10).toFixed(2);
                        if (this.power1 < 10) {
                            sendMeg = "HWfanf00" + this.power1 + "Z";
                        }
                        else if (this.power1 < 100) {
                            sendMeg = "HWfanf0" + this.power1 + "Z";
                        }
                        else {
                            sendMeg = "HWfanf" + this.power1 + "Z";
                        }
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                    }
                
                }
            }
        }
            if (event.data == "开启定时") {
                this.timerId = setInterval(() => {
                    this.overtime = 1;
                    console.log("超时了！")
                }, 20000);
            }
            if (event.data.substring(0, 2) == "SD") {
                if (this.switch5 == true) {    //判断湿度是否超标    
                    if(event.data.substring(2,) > this.limit5) {
                        axios.get("http://localhost:8888/sendMessageTo/HWwarn2Z");
                    }
                }
            }
            if (event.data.substring(0, 2) == "ls") { // 光照强度逻辑判断
                this.state3 = Number(event.data.substring(2,));
                if(this.switch5 == true){
                if (this.state3 < this.limit3) {
                    this.switch4 = true;
                    this.power3 = ((this.limit3 - this.state3) * 10).toFixed(2);
                    if (this.power3 < 10) {
                        sendMeg = "HWled100" + this.power3 + "Z";
                    }
                    else if (this.power3 < 100) {
                        sendMeg = "HWled10" + this.power3 + "Z";
                    }
                    else {
                        sendMeg = "HWled1" + this.power3 + "Z";
                    }
                    axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                }else{
                    this.switch4 = false;
                    axios.get("http://localhost:8888/sendMessageTo/HWled1000Z");
                }
            }
            }
            
            if (event.data.substring(0,6) == "HWled1") { 
                if(event.data.substring(6,event.data.length - 1) == "000"){
                    this.switch4 = false;
                    this.power3 = 0;
                }
                else{
                    this.switch4  =true;
                    this.power3 = Number(event.data.substring(6,event.data.length - 1))
                }
            }
            if (event.data.substring(0,6) == "HWfanz") { 
                if(event.data.substring(6,event.data.length - 1) == "000"){
                    this.buttonvalue1 = "关闭"
                    this.power1 = 0;
                    this.switch1 = false;
                }else{
                    this.buttonvalue1 = "正转"
                    this.power1 = Number(event.data.substring(6,event.data.length - 1))
                    this.switch1 = true;
                }
            }
            if (event.data.substring(0,6) == "HWfanf") { 
                if(event.data.substring(6,event.data.length - 1) == "000"){
                    this.buttonvalue1 = "关闭"
                    this.power1 = 0;
                    this.switch1 = false;
                }else{
                    this.buttonvalue1 = "反转"
                    this.power1 = Number(event.data.substring(6,event.data.length - 1))
                    this.switch1 = true;
                }
            }
            if (event.data.substring(0,6) == "HWfan2") {   //风扇的功率
                if(event.data.substring(6,event.data.length - 1) == "000"){
                    this.power1 = 0;
                    this.switch2 = false;
                }
                else{
                    this.power1 = event.data.substring(6,event.data.length - 1);
                    this.switch2 = true;
                }
            }
            
            if (event.data.substring(0, 4) == "Tmax") {   //设置温度阈值1
                this.limit1 = event.data.substring(4,event.data.length - 1);
                
            }
            if (event.data.substring(0, 4) == "Lmax") {  //设置温度阈值2
                this.limit2 = event.data.substring(4,event.data.length - 1);
            }
            if (event.data.substring(0, 5) == "Light") {  //设置光照阈值
                this.limit3 = event.data.substring(5,event.data.length - 1);
            }
            if (event.data.substring(0, 5) == "HWPID") {  //接受卡号编号
                var flag = false;
                this.cardid = event.data.substring(5,event.data.length - 1);
                for(var i = 0; i < this.card.length; i++){
                    if(this.card[i] == this.cardid){
                        flag = true;
                    }
                }
                if(flag == false){
                    this.card.push(this.cardid);
                    console.log("存储成功");
                }
            }
            if (event.data == "Reconnect") {
                this.reconnect();
            }
        },

    }

}


</script>
